<template>
    <el-dialog :title="title" :visible="editData.editVisable" @close="close()">
        <el-form :model="editData.editRow" :rules="rules" ref="edit" label-width="120px" class="edit-from">
            <el-form-item label="店铺种类名称" prop="class">
                <el-input v-model="editData.editRow.class" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="种类图标">
                <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                    <img v-if="editData.editRow.image" :src="editData.editRow.image" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="edit-footer">
            <el-button @click="close()">取 消</el-button>
            <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { mapGetters } from 'vuex';
    import editMixin from "@/mixins/editMixin";

    export default {
        mixins: [editMixin],

        data() {
            return {
                pageName: 'businessSetting',
                editList: ['image', 'class'],
                rules: {
                    class: [
                        { required: true, message: '请输入手机号', trigger: 'blur' }
                    ],
                    image: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                }
            };
        },

        computed: {
            ...mapGetters({
                editData: `businessSetting/editData`
            }),
            title: function () {
                return this.editData.editType == 'add' ? '新增' : '修改'
            }
        },

        methods: {
            handleAvatarSuccess() {
                console.log('上传成功')
            }
        }
    };
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}
.avatar {
    width: 80px;
    height: 80px;
    display: block;
}
</style>
